<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>select</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      :root {
        --background-gradient: #f39c12;
        --gray: #34495e;
        --darkgray: #2c3e50;
      }

      body {
        color: #fff;
        background: var(--background-gradient);
        display: flex;
        height: 80vh;
        justify-content: center;
        align-items: center;
      }

      .select {
        position: relative;
        display: flex;
        width: 20em;
        height: 3em;
        border-radius: 0.25em;
        overflow: hidden;
      }

      .select::after {
        content: '\25BC';
        position: absolute;
        top: 0;
        right: 0;
        padding: 1em;
        background-color: #34495e;
        transition: 0.25s all ease;
        pointer-events: none;
      }

      .select:hover::after {
        color: #f39c12;
      }

      select {
        appearance: none;
        outline: 0;
        border: 0;
        box-shadow: none;

        flex: 1;
        padding: 0 1em;
        color: #fff;
        background-color: var(--darkgray);
        background-image: none;
        cursor: pointer;
      }

      select::-ms-expand {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="select">
      <select>
        <option value="1">Pure CSS Select</option>
        <option value="2">No JS</option>
        <option value="3">Nice!</option>
      </select>
    </div>
  </body>
</html>
